<script setup lang="ts">
import { IActionParam } from "@interface";
import { computed, Ref } from "vue";
interface DatePickerProps {
  /**
   * checked选中状态
   *
   * @type {number}
   * @memberof DatePickerProps
   */
  value: number;

  /**
   * checked选中状态
   *
   * @type {string}
   * @memberof DatePickerProps
   */
  name: string;

  /**
   * 日期面板的状态
   *
   * @type {string}
   * @memberof DatePickerProps
   */
  mode: 'time' | 'date' | 'month' | 'year' | 'decade';

   /**
   * 设置选择器类型
   *
   * @type {string}
   * @memberof DatePickerProps
   */
  picker: 'date' | 'week' | 'month' | 'quarter' | 'year';

  /**
   * 提示信息
   *
   * @type {string}
   * @memberof DatePickerProps
   */
  placeholder: string;

  /**
   * 禁用
   *
   * @type {boolean}
   * @memberof DatePickerProps
   */
  disabled?: boolean;

  /**
   * 只读模式
   *
   * @type {boolean}
   */
  readonly?: boolean;

}

interface EditorEmit {
  (name: "editorEvent", value: IActionParam): void;
}

const props = withDefaults(defineProps<DatePickerProps>(), {
  disabled: false,
  readonly: false,
  picker: 'date',
});
const emit = defineEmits<EditorEmit>();
const onChange = (value: number) => {
  emit("editorEvent", {
    tag: props.name,
    action: "valueChange",
    data: value ? 1 : 0,
  });
};
</script>

<template>
  <a-date-picker 
  :class="['app-editor-container', `app-date-picker-${name}`]"
  :mode="mode"
  :picker="picker"
  :placeholder="placeholder"
  :inputReadOnly="readonly"
  :disabled="disabled"/>
</template>

<style scoped>
</style>
